<template>
    <div class="userlist">

        <div class="userlist-left">
            <el-scrollbar>
                <div class="left-list" v-for="(item,index) in friendList" :class="{'left-list-bg' : active == item.id}" @click.prevent="startCall(item)" :key="index">
                <img :src="item.avatar" class="left-list-img">
                <span class="left-list-title">{{item.name}}</span>
                </div>
            </el-scrollbar>
        </div>

        <div class="userlist-right">
            <message :message="messageList"/>
        </div>
    </div>
</template>
<script>
import { qeuryFriend, isAndTop, delFriend } from "@/api/social/friend";
import Message from "../../../components/Router/Message.vue";
import { qeuryMessage } from "@/api/social/message";


export default {
    name: 'Apply',

    components: {
      Message
    },

    data() {
        return {
            active:0,
            friendList:[],
            messageList:[]
        };
    },

    mounted() {
        
    },

    methods: { 
        getFriend(){
            qeuryFriend().then((response) => {
                this.active = response[0].id;
                this.friendList = response;
            });
        },
        startCall(item){
            this.active = item.id;
            this.getMessage();
        },
        getMessage(){
          qeuryMessage(this.active).then((response) => {
            this.messageList = response;
          })
        }
    },
    created() {
        this.getFriend();
        setTimeout(() => {
          this.getMessage();
        },100);  
    },
};
</script>
<style scoped>
  .userlist{
    display: flex;
    height: 100%;
    width: 100%;
  }
  .userlist-left{
    padding-top: 20px;
    padding-left: 10px;
    flex: 1;
    border-right: #dbd6d6 1px solid;
  }
  .userlist-right{
    flex: 4;
  }


  .left-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    grid-template-areas: 'a b'
                         'a b';
    justify-items: center;
    align-items:center;
    margin-top: 10px;
  }
  .left-list-bg{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    grid-template-areas: 'a b'
    'a b';
    justify-items: center;
    align-items:center;
    margin-top: 10px;

    background-color: #eaeaea;
  }
  .left-list-img{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    grid-area:a
  }
  .left-list-title{
    grid-area:b
  }

</style>